<template>
	<view class="travel-apply-bill-data">
		<view class="uni-segmented-control">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#FFA07A" class="header"></uni-segmented-control>
		</view>
		<view class="travel-apply-bill-content">
			<view v-if="current === 0" class="bills-detail-box">
				<view class="top">
					<uni-collapse class="uni-collapse">
						<uni-collapse-item title="单据有3处风险,请注意" open showAnimation>
							<view v-for="(item, index) in collapseList" :key="index">
								<view v-if="index === 2" @click="toCollapse" class="uni-collapse-item">
									<text>{{ item.title }}</text>
									<icon-svg icon-class="icon-test7"></icon-svg>
								</view>
								<view v-else>
									<navigator :url="item.url" class="uni-collapse-item">
										<text>{{ item.title }}</text>
										<icon-svg icon-class="icon-test7"></icon-svg>
									</navigator>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<view class="examine-status-list">
						<view class="item" v-for="item in examineList" :key="item.index">
							<view class="status">
								<text>{{ item.status }}</text>
							</view>
							<view class="detail">
								<text class="time">{{ item.time }}</text>
								<text class="name">{{ item.name }}</text>
								<text class="res">{{ item.res }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="center-form">
					<form class="handFormBox" @submit="formSubmit" @reset="formReset">
						<view class="uni-form-item" v-for="(item, index) in formList" :key="index">
							<view v-if="item.title === '申请金额'">
								<view class="title">{{ item.title }}:</view>
								<view style="display: flex;">
									<text style="margin-right: 4rpx;">CNY></text>
									<input class="uni-input" v-model="item.value" :name="item.name" :placeholder="item.placeholder" />
								</view>
							</view>
							<view v-else>
								<view class="title">{{ item.title }}:</view>
								<view><input class="uni-input" v-model="item.value" :name="item.name" :placeholder="item.placeholder" /></view>
							</view>
						</view>
					</form>
				</view>
				<view class="center-list">
					<uni-collapse style="background: #fff;">
						<uni-collapse-item title="费用明细·2·明细列表" open showAnimation>
							<view class="amount-total">
								<!-- <text>合计总金额</text> -->
								<text style="color:#F7A609; font-size: 32rpx;">总金额为5000，住宿1500，机票费3500</text>
							</view>
							<view v-for="item in detailList" :key="item.index">
								<navigator :url="item.url" class="uni-collapse-item">
									<view class="left">
										<icon-svg v-if="item.icon === 'jiudian'" :icon-class="item.icon" style="color:#B29DDD;font-size: 1.2em;" />
										<icon-svg v-else :icon-class="item.icon" style="color:#F7A609;font-size: 1.2em;" />
									</view>
									<view class="center">
										<view class="title">
											<text class="name">{{ item.title.name }}</text>
											<text calss="English" style="color:#BFBFBF; margin-left: 10rpx;">{{ item.title.English }}</text>
										</view>
										<!-- <view class="detail">
											<text>{{ item.detail.address }}</text>
											<text>{{ item.detail.time }}</text>
											<text>{{ item.detail.origin }}</text>
											<text>{{ item.detail.wu }}</text>
										</view> -->
									</view>
									<view class="right">
										<text>CNY{{ item.money }}</text>
									</view>
								</navigator>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="footer">
					<view class="money-list" v-for="item in moneyList" :key="item.index">
						<view class="left">
							<text>{{ item.title }}</text>
						</view>
						<view class="right">
							<text style="font-weight: bold;">CNY{{ item.money }}</text>
							<text style="color: #ccc;font-size: 30rpx;">{{ item.chinaMoney }}</text>
						</view>
					</view>
				</view>
				<view class="odd-numbers"><text>单号#S200000000006</text></view>
				<btm></btm>
			</view>
			<view v-if="current === 1" class="approval-process-box"><approvalProcess /></view>
			<view v-if="current === 2" class="budget-box"><budgetOccupation /></view>
		</view>
<!-- 					<view class="travel-apply-bill-footer">
<view class="content">
				<text @click.stop="openPop">...</text>
				<view v-if="isPopShow" class="popList">
					<text class="triangle"></text>
					<text class="copy">复印</text>
					<text class="print">打印</text>
				</view>
			</view> -->
<!-- 			<navigator url="/pages/add/travelApplyBill/discuss"><text style="margin-left: 40rpx;">评论</text></navigator>
			<text style="margin-left: 40rpx;">催办</text> -->
			<!-- <button>审批</button> -->
		<!-- </view> -->
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
import approvalProcess from 'pages/add/travelApplyBill/approvalProcess.vue';
import budgetOccupation from 'pages/add/travelApplyBill/budgetOccupation.vue';
import btm from 'pages/common/btm.vue'
export default {
	components: {
		uniSegmentedControl,
		uniCollapse,
		uniCollapseItem,
		approvalProcess,
		budgetOccupation,
		btm
	},
	data() {
		return {
			items: ['单据详情', '审批流程', '预算占用'],
			current: 0,
			isPopShow: false,
			examineList: [{ status: '审批中', time: '今天17:36', name: '陈赫斯', res: '提交送审' }],
			formList: [
				{ title: '申请事项', placeholder: '请输入标题', name: 'input', value: '差旅费申请' },
				{ title: '申请人', placeholder: '请输入名称', name: 'input', value: '陈赫斯' },
				{ title: '申请日期', placeholder: '请输入日期', name: 'input', value: '2020-12-27' },
				{ title: '申请单位', placeholder: '请选择费用承担单位', name: 'input', value: '时代邻里股份有限公司' },
				{ title: '申请部门', placeholder: '', name: 'input', value: '公共部门' },
				{ title: '申请金额', placeholder: '请输入借款金额', name: 'input', value: '¥5,000.00' }
			],
			detailList: [
				{
					icon: 'jiudian',
					url: '/pages/add/travelApplyBill/stayCostDetail',
					title: { name: '住宿费', English: '' },
					detail: { address: '广东省/深圳市/深圳市区...', time: '2020-12-27-2020-12-27', origin: '消费事由', wu: '无' },
					money: '1500.00'
				},
				{
					icon: 'feiji1',
					url: '/pages/add/travelApplyBill/travelCostDetail',
					title: { name: '机票费', English: '' },
					detail: { address: '', time: '无消费日期', origin: '消费事由', wu: '无' },
					money: '3500.00'
				}
			],
			moneyList: [{ title: '申请金额', money: '5,000.00', chinaMoney: '伍仟元整' }, { title: '支付金额', money: '5,000.00', chinaMoney: '伍仟元整' }],
			collapseList: [
				{ url: '/pages/add/travelApplyBill/verificationBorrowMoney', title: '1、陈赫斯 有借款即将到期' },
				{ url: '/pages/add/travelApplyBill/verificationBorrowMoney', title: '2、陈赫斯 有借款逾期未还' },
				// { title: '3、陈赫斯  有超预算费用' }
			]
		};
	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},
		openPop() {
			this.isPopShow = !this.isPopShow;
		},
		toCollapse() {
			this.current = 2;
		},
		hiddenClick() {
			this.isPopShow = false;
		}
	},
	mounted() {
		document.addEventListener('click', this.hiddenClick);
	}
};
</script>

<style lang="scss" scoped>
.travel-apply-bill-data {
	.uni-segmented-control {
		padding: 10rpx 0;
	}
	.travel-apply-bill-content {
		.top,
		.center-form,
		.center-list,
		.footer {
			margin-top: 40rpx;
			background: #fff;
		}
		.top {
			.uni-collapse {
				background: #fef7e4;
				.uni-collapse-cell {
					background: #fef7e4;
					.uni-collapse-item {
						padding: 30rpx 20rpx;
						color: #b9b3a4;
						font-size: 30rpx;
						display: flex;
						justify-content: space-between;
					}
				}
			}
			.examine-status-list {
				.item {
					padding: 20rpx 10rpx;
					.status::before {
						content: '·';
						color: #33b5c6;
						font-size: 50rpx;
					}
					.detail {
						.time,
						.res {
							color: #ccc;
							margin-left: 10rpx;
							font-size: 32rpx;
						}
						.name {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.center-form {
			.handFormBox {
				.uni-form-item {
					padding: 12rpx 20rpx;
					color: #595959;
					font-size: 34rpx;
					border-bottom: 1px solid #eeeeee;
					.title {
						padding: 10rpx 0;
					}
					.uni-input-placeholder {
						color: #ccc;
						margin-left: 10rpx;
					}
				}
			}
		}
		.center-list {
			.uni-collapse-cell {
				background-color: #fff;
			}
			.amount-total {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 20rpx;
			}
			.uni-collapse-item {
				padding: 40rpx 20rpx;
				display: flex;
				.left {
					width: 10%;
				}
				.center {
					width: 60%;
					.detail {
						margin-top: 20rpx;
						color: #bfbfbf;
						font-size: 32rpx;
						text {
							display: block;
						}
					}
				}
				.right {
					width: 30%;
					font-size: 30rpx;
					text-align: right;
					font-weight: bold;
				}
			}
		}
		.footer {
			margin-bottom: 20px;
			.money-list {
				padding: 10rpx 20rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				.left {
					color: #595959;
				}
				.right {
					text {
						display: block;
					}
				}
			}
		}
		.odd-numbers {
			line-height: 100rpx;
			height: 100rpx;
			color: #ccc;
			text-align: center;
			font-size: 32rpx;
		}
	}
	.travel-apply-bill-footer {
		padding: 0 20rpx;
		background-color: #fff;
		display: flex;
		line-height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		.content {
			position: relative;
			.popList {
				position: absolute;
				bottom: 90rpx;
				left: -10rpx;
				width: 140rpx;
				font-size: 28rpx;
				background-color: #f8f9f9;
				text-align: center;
				z-index: 1;
				.triangle {
					width: 0;
					height: 0;
					border-left: 20rpx solid transparent;
					border-right: 20rpx solid transparent;
					border-top: 40rpx solid #f8f9f9;
					position: absolute;
					bottom: -40rpx;
					left: 0;
				}
				.copy,
				.print {
					padding: 0 6rpx;
				}
				.print {
					border-left: 1px solid #bfbfbf;
				}
			}
		}
		button {
			line-height: 100rpx;
			background: #33b4c5;
			color: #fff;
			width: 200rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}
</style>
